<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="title"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset [title]="'Name And Method' | translate">
        <ix-input
          formControlName="connection_name"
          [label]="'Connection Name' | translate"
          [required]="true"
        ></ix-input>

        @if (isNew) {
          <ix-select
            formControlName="setup_method"
            [label]="'Setup Method' | translate"
            [required]="true"
            [options]="setupMethods$"
            [tooltip]="helptext.setupMethodTooltip | translate"
          ></ix-select>
        }
      </ix-fieldset>

      <ix-fieldset [title]="'Authentication' | translate">
        @if (isManualSetup) {
          <ix-input
            formControlName="host"
            [label]="'Host' | translate"
            [required]="true"
            [tooltip]="helptext.hostTooltip | translate"
          ></ix-input>
          <ix-input
            formControlName="port"
            type="number"
            [label]="'Port' | translate"
            [required]="true"
          ></ix-input>
        }

        @if (!isManualSetup) {
          <ix-input
            formControlName="url"
            [label]="'TrueNAS URL' | translate"
            [required]="true"
            [tooltip]="helptext.urlTooltip | translate"
            [parse]="formatter.stringAsUrlParsing"
          ></ix-input>
        }

        @if (!isManualSetup) {
          <ix-input
            formControlName="admin_username"
            [label]="'Admin Username' | translate"
            [tooltip]="helptext.adminUsernameTooltip | translate"
          ></ix-input>
        }

        @if (!isManualSetup) {
          <ix-input
            formControlName="password"
            type="password"
            [required]="true"
            [label]="'Admin Password' | translate"
            [tooltip]="helptext.passwordTooltip | translate"
          ></ix-input>
        }

        @if (!isManualSetup) {
          <ix-input
            formControlName="otp_token"
            [label]="'One-Time Password (if necessary)' | translate"
            [tooltip]="helptext.otpTooltip | translate"
          ></ix-input>
        }

        <ix-input
          formControlName="username"
          [required]="true"
          [label]="'Username' | translate"
          [tooltip]="helptext.usernameTooltip | translate"
        ></ix-input>

        @if (!isManualSetup && (isNotRootUsername$ | async)) {
          <ix-checkbox
            formControlName="sudo"
            [label]="'Enable passwordless sudo for zfs commands' | translate"
            [tooltip]="helptext.sudoTooltip | translate"
          ></ix-checkbox>
        }

        <ix-select
          formControlName="private_key"
          [label]="'Private Key' | translate"
          [required]="true"
          [options]="privateKeys$"
          [tooltip]="helptext.privateKeyTooltip | translate"
        ></ix-select>

        @if (isManualSetup) {
          <ix-textarea
            class="remote-host-key-textarea"
            formControlName="remote_host_key"
            [label]="'Remote Host Key' | translate"
            [tooltip]="helptext.remoteHostKeyTooltip | translate"
          ></ix-textarea>
        }

        <ng-container *ixRequiresRoles="requiredRoles">
          @if (isManualSetup) {
            <button
              type="button"
              mat-button
              class="discover-key-button"
              ixTest="discover-remote-host-key"
              [disabled]="!isManualAuthFormValid"
              (click)="onDiscoverRemoteHostKeyPressed()"
            >
              {{ 'Discover Remote Host Key' | translate }}
            </button>
          }
        </ng-container>
      </ix-fieldset>

      <ix-fieldset [title]="'More Options' | translate">
        <ix-input
          formControlName="connect_timeout"
          type="number"
          [label]="'Connect Timeout' | translate"
          [tooltip]="helptext.connectTimeoutTooltip | translate"
        ></ix-input>
      </ix-fieldset>

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          type="submit"
          mat-button
          color="primary"
          ixTest="save"
          [disabled]="!form.valid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
